import { useState, useEffect } from 'react';

export const StatusWidget = ({ service }) => {
  const [widgetHtml, setWidgetHtml] = useState('');
  const apiDownWatchPublicKey = 'pk_Osn50U6lzOCALPAuP46SfE42xJfMKY914TMzrWE3Tr4';
  const apiDownWatchHost = 'https://api.apidownwatch.com';
  const refreshRate = 5;

  useEffect(() => {
      const fetchWidget = () => {
          fetch(`${apiDownWatchHost}/api/embed/${service}?key=${apiDownWatchPublicKey}`)
              .then((res) => res.text())
              .then((html) => setWidgetHtml(html))
              .catch((err) => {
                  console.error('Failed to fetch status widget:', err);
              });
      };

      fetchWidget();

      const interval = setInterval(fetchWidget, refreshRate * 60 * 1000);

      return () => clearInterval(interval);
  }, [service]);

  if (!widgetHtml) {
      return <div className="min-h-[28x]"></div>;
  }
  return <div className="-mt-8" dangerouslySetInnerHTML={{ __html: widgetHtml }} />;
}

